<template>
  <div>
    <div class="center-pane wide">
      <el-container>
        <el-aside width="16vw" class="mats-sidebar">
          <mat-nav :kind="kind" :cats="cats"></mat-nav>
        </el-aside>
        <el-main class="mats-main">
          <mat-list :mode="mode" :kind="kind" :cats="cats"></mat-list>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import MatNav from "./MatNav.vue";
import MatList from "./MatList.vue";
import { MatMode, TagCatsForMatKind } from "@js/constants.js";

export default {
  components: {
    MatNav,
    MatList,
  },
  props: ["kind"],
  created() {
    this.setActiveMenuIndex();
    this.mode = this.getMode();
  },
  watch: {
    $route() {
      this.mode = this.getMode();
    },
  },
  data() {
    return {
      mode: MatMode.Fav,
      cats: TagCatsForMatKind.get(this.kind)
    };
  },
  methods: {
    getMode() {
      let path = this.$route.path;
      let node = path.split("/").pop();
      switch (node) {
        case "fav":
          return MatMode.Fav;
        case "discover":
          return MatMode.Discover;
        case "resources":
          return MatMode.Resources;
        default:
          return MatMode.Discover;
      }
    },
  },
};
</script>

<style lang="stylus">
.mats-sidebar
  padding 1vh 0 0 0
  border-right 1px solid #eee
  box-shadow 4px 0 4px -4px rgba(0,0,0,.1)

  .poem-stats
    text-align left

    .stats-title
      font-weight bold

.mats-main
  padding 0 0 0 1vw

</style>

